<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>   
  		  *{
        		margin: 0px;
        		padding: 0px;
        	}
        /* jssor slider arrow navigator skin 05 css */
        /*
        .jssora05l                  (normal)
        .jssora05r                  (normal)
        .jssora05l:hover            (normal mouseover)
        .jssora05r:hover            (normal mouseover)
        .jssora05l.jssora05ldn      (mousedown)
        .jssora05r.jssora05rdn      (mousedown)
        */
        .qie-btn{
        	position: absolute;
        	width: 100%;
        	top:406px;
        	text-align: center;
        	background-color: rgba(51,51,51,0.5);
        	height: 25px;
        }
        .jssora05l, .jssora05r {
            display: inline-block;
            /*position: absolute;*/
            /* size of arrow element */
            width:25px;
            height:25px;
            cursor: pointer;
            background: url('${base}/resources/terminal/image/a17.png') no-repeat;
            overflow: hidden;
        }
        .jssora05l { background-position: -7px -25px; }
        .jssora05r { background-position: -44px -25px; }
        .jssora05l.jssora05ldn { background-position: -156px -25px; }
        .jssora05r.jssora05rdn { background-position: -194px -25px; }

        /* jssor slider thumbnail navigator skin 01 css */
        /*
        .jssort01 .p            (normal)
        .jssort01 .p:hover      (normal mouseover)
        .jssort01 .p.pav        (active)
        .jssort01 .p.pdn        (mousedown)
        */
    </style>
    <script type="text/javascript" src="${base}/resources/public/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="${base}/resources/terminal/js/jssor.slider.mini.js"></script>
</head>
<body>
    <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 800px; height: 456px; overflow: hidden; visibility: hidden; background-color: #24262e;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
            <div style="position:absolute;display:block;background:url('${base}/resources/terminal/image/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
        </div>
        <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 356px; overflow: hidden;">
            <div data-p="144.50" style="display: none;">
            	<a href='${base}/terminal/product/list.jhtml'>
                <img data-u="image" src="${base}/resources/terminal/image/1.jpg" />
                </a>
            </div>
            <div data-p="144.50" style="display: none;">
	            <a href='${base}/terminal/scheme/list.jhtml'>
	                <img data-u="image" src="${base}/resources/terminal/image/2.jpg" />
	             </a>
            </div>
            <div data-p="144.50" style="display: none;">
            	<a href='${base}/terminal/cases/list.jhtml'>
                	<img data-u="image" src="${base}/resources/terminal/image/3.jpg" />
                </a>
            </div>
            <div data-p="144.50" style="display: none;">
	            <a href='${base}/terminal/product/tehui.jhtml?tagId=14'>
	                <img data-u="image" src="${base}/resources/terminal/image/5.jpg" />
                </a>
            </div>
            <div data-p="144.50" style="display: none;">
	            <a href='${base}/terminal/article/list.jhtml'>
	                <img data-u="image" src="${base}/resources/terminal/image/6.jpg" />
                </a>
            </div>
        </div>
        <div class="qie-btn">
        	<span data-u="arrowleft" class="jssora05l" style="width:25px;height:25px;float: left;"></span>
        	<span style="font-size: 10px;color:#fff;">Copyright&copy; 2016-2017&nbsp;766智能家网上商城&nbsp;版权所有</span>
        	<span data-u="arrowright" class="jssora05r" style="width:25px;height:25px;float: right;"></span>
        </div>     
    </div>

    <!-- #endregion Jssor Slider End -->
</body>
<script>
        jQuery(document).ready(function ($) {
            var jssor_1_SlideshowTransitions = [
              {$Duration:1000,x:0.3,$During:{$Left:[0.3,0.5]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,x:-0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,x:-0.3,$During:{$Left:[0.3,0.5]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,y:0.3,$During:{$Top:[0.3,0.5]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,y:-0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,y:-0.3,$During:{$Top:[0.3,0.5]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,y:0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,x:0.3,$Cols:2,$During:{$Left:[0.3,0.5]},$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,y:0.3,$Rows:2,$During:{$Top:[0.3,0.5]},$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,y:0.3,$Cols:2,$During:{$Top:[0.3,0.5]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,x:0.3,$Rows:2,$During:{$Left:[0.3,0.5]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.5],$Top:[0.3,0.5]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.5],$Top:[0.3,0.5]},$SlideOut:true,$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,$Delay:20,$Clip:3,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,$Delay:20,$Clip:12,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
              {$Duration:1000,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
            ];
            //参数
            var jssor_1_options = {
              $AutoPlay: true,//自动播放开关
              $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: jssor_1_SlideshowTransitions,
                $TransitionsOrder: 1
              },
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $ThumbnailNavigatorOptions: {//底部小图标
                $Class: $JssorThumbnailNavigator$,
                $Cols: 10,
                $SpacingX: 8,
                $SpacingY: 8,
                $Align: 360
              }
            };
           
            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);//调用函数          
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizing
                      function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                	var width = window.screen.width;
                  // refSize = Math.min(refSize, 1920);//调整图片大小
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
                  height();
              }
            ScaleSlider();
            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);      
            function height(){	
	            var height = window.screen.availHeight-47;//屏幕可用于工作区域高度
	            var width = window.screen.availWidth;
	            $('body').css({height:height,width:width});
	          	$('#jssor_1').height(height+'px');
				height = scale();
	            $('#jssor_1>div,#jssor_1>div>div,#jssor_1 div[data-u="slides"],#jssor_1 div[data-u="slides"]>div,#jssor_1 div[data-u="slides"] img').height(height+'px'); 
            }
            function scale(){
	         	var h = window.screen.availHeight;
	         	if(window.screen.height>=1080){
	           		h = h/2.49;
	           		return h;
	           	}else{
	           		h = h/1.7075;
	           		return h;
	           	}
	    	}
        });
       
    </script>
</html>
